// 忘记密码中的确认修改组件

import { useState } from 'react';
import styles from '../css/resetPwd.module.css'
import { Button, Input, message } from 'antd';
import { sendYZM } from '../request/instance';
import { useEffect } from 'react';
import { resetPassword } from '../request/instance';

function ConfirmModification(props) {
    // 是否修改手机号，true：正在修改，false：没有修改
    const [isEditPhone, setIsEditPhone] = useState(false)
    // 绑定新密码输入值
    const [newPassword, setNewPassword] = useState('')
    // 绑定确认密码输入框的值
    const [confirmNewPassword, setConfirmNewPassword] = useState('')
    // 不修改时显示的手机号
    const [showPhone, setShowPhone] = useState('')
    // 绑定修改手机号的输入框的值
    const [editPhone, setEditPhone] = useState('')
    // 绑定手机号验证码输入框
    const [verificationCode, setVerificationCode] = useState('')
    // 新密码error
    const [newPasswordError, setNewPasswordError] = useState('')
    // 确认密码error
    const [confirmPasswordError, setConfirmPasswordError] = useState('')
    // 验证码error
    const [verificationCodeError, setVerificationCodeError] = useState('')
    // 修改手机号error
    const [editPhoneError, setEditPhoneError] = useState('')
    // 倒计时时间
    const [countdown, setCountdown] = useState(0);
    // 是否正在倒计时
    const [isCounting, setIsCounting] = useState(false);
    // 短信验证码
    const [Yzm,setYZM]=useState('')
    // 确认修改手机号处理函数
    const ConfirmToModifyPhone = () => {
        if (/^1[3-9]\d{9}$/.test(editPhone)) {
            setShowPhone(() => editPhone)
            setIsEditPhone(false)
            setEditPhoneError('')
        } else {
            setEditPhoneError('请输入正确的手机号！')
        }
    }
    // 确认修改密码处理函数
    const confirmEditPassword = async() => {
        // 校验新密码输入框不能为空
        if (newPassword.trim() == '') {
            setNewPasswordError("新密码不能为空！")
        } else {
            setNewPasswordError("")
        }
        // 校验新密码输入框不能为空
        if (confirmNewPassword.trim() == '') {
            setConfirmPasswordError('确认密码不能为空！')
        } else {
            setConfirmPasswordError('')
        }
        // 校验验证码不能为空
        if (verificationCode.trim() == '') {
            setVerificationCodeError('验证码不能为空！')
        } else {
            setVerificationCodeError('')
        }

        if (newPassword && confirmNewPassword && verificationCode && localStorage.getItem('phone')) {
            if (newPassword !== confirmNewPassword) {
                message.error('新密码和确认密码不同！')
            }else{
                if(verificationCode===Yzm){
                    await resetPassword(showPhone,newPassword).then((res)=>{
                        if(res.data.code==200){
                            message.success(res.data.message)
                            props.isResetPassword()
                        }
                    })
                }else{
                    message.error("验证码错误，请重新输入！")
                }
            }
        }

    }

    // 倒计时逻辑
    useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => {
                setCountdown(countdown - 1);
            }, 1000);
            return () => clearTimeout(timer); // 清除定时器
        } else {
            setIsCounting(false); // 倒计时结束
        }
    }, [countdown]);

    // 获取验证码
    const ObtainVerificationCode = async () => {
        setCountdown(60); // 设置倒计时时间（60秒）
        setIsCounting(true); // 开始倒计时
        await sendYZM({ phone: showPhone }).then((res) => {
            console.log(res.data);
            setYZM(res.data.code)
        })
    }

    // 获取该用户的手机号并显示
    useEffect(()=>{
        setShowPhone(localStorage.getItem('phone'))
    },[])
    return <>
        <table className={styles.table}>
            <tbody>
                <tr>
                    {/* 新密码输入框 */}
                    <td>新密码：</td>
                    <td><Input placeholder='请输入新密码' className={styles.inp} value={newPassword} onInput={(val) => { setNewPassword(() => val.target.value) }} />
                        {newPasswordError && <p className={styles.p1}>{newPasswordError}</p>}
                    </td>
                </tr>
                <tr>
                    {/* 确认密码输入框 */}
                    <td>确认密码：</td>
                    <td><Input placeholder='输入确认密码' className={styles.inp} value={confirmNewPassword} onInput={(val) => { setConfirmNewPassword(() => val.target.value) }} />
                        {confirmPasswordError && <p className={styles.p1}>{confirmPasswordError}</p>}
                    </td>
                </tr>
                <tr>
                    {/* 手机号码以及修改手机号码 */}
                    <td>手机：</td>
                    <td>
                        {/* isEditPhone为true显示修改手机号的输入框，为false显示隐藏四位数手机号 */}
                        {
                            isEditPhone ? <Input
                                placeholder='请输入新手机号'
                                className={styles.inp}
                                suffix={
                                    editPhone.trim() == '' ? <Button className={styles.btn1} onClick={() => { setIsEditPhone(() => false) }}>取消</Button> : <Button type='primary' className={styles.btn1} onClick={() => { ConfirmToModifyPhone() }}>确定</Button>
                                }
                                value={editPhone}
                                onInput={(val) => { setEditPhone(() => val.target.value) }}
                            /> : <div className={styles.box3}>
                                <p>{showPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}</p>
                                <p className={styles.p} onClick={() => { setIsEditPhone(() => true) }}>修改</p>
                            </div>
                        }
                        {editPhoneError && <p className={styles.p1}>{editPhoneError}</p>}
                    </td>
                </tr>
                <tr>
                    <td>验证：</td>
                    <td>
                        <Input
                            suffix={
                                <Button type='primary' className={styles.btn1} onClick={ObtainVerificationCode} disabled={isCounting}>{isCounting ? `${countdown}秒后重新获取` : '获取验证码'}</Button>
                            }
                            className={styles.inp}
                            placeholder='请输入短信验证码'
                            value={verificationCode}
                            onInput={(val) => { setVerificationCode(() => val.target.value) }}
                        />
                        {verificationCodeError && <p className={styles.p1}>{verificationCodeError}</p>}
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <Button className={styles.btn2} type='primary' onClick={() => { confirmEditPassword() }}>确认修改</Button>
                    </td>
                </tr>
            </tbody>
        </table>
    </>
}

export default ConfirmModification